
const _interopRequireDefault = require('@babel/runtime/helpers/interopRequireDefault');

exports.__esModule = true;
exports.default = void 0;

const _extends2 = _interopRequireDefault(require('@babel/runtime/helpers/extends'));

const _utils = require('../utils');

const _router = require('../utils/router');

const _relation = require('../mixins/relation');

const _icon = _interopRequireDefault(require('../icon'));

const _info = _interopRequireDefault(require('../info'));

// Utils
// Mixins
// Components
const _createNamespace = (0, _utils.createNamespace)('tabbar-item');
const createComponent = _createNamespace[0];
const bem = _createNamespace[1];

const _default = createComponent({
  mixins: [(0, _relation.ChildrenMixin)('vanTabbar')],
  props: (0, _extends2.default)({}, _router.routeProps, {
    dot: Boolean,
    icon: String,
    name: [Number, String],
    info: [Number, String],
    badge: [Number, String],
    iconPrefix: String,
  }),
  data: function data() {
    return {
      active: false,
    };
  },
  computed: {
    routeActive: function routeActive() {
      const { to } = this;
      const { $route } = this;

      if (to && $route) {
        const config = (0, _utils.isObject)(to) ? to : {
          path: to,
        };
        const pathMatched = config.path === $route.path;
        const nameMatched = (0, _utils.isDef)(config.name) && config.name === $route.name;
        return pathMatched || nameMatched;
      }
    },
  },
  methods: {
    onClick: function onClick(event) {
      this.parent.onChange(this.name || this.index);
      this.$emit('click', event);
      (0, _router.route)(this.$router, this);
    },
    genIcon: function genIcon(active) {
      const h = this.$createElement;
      const slot = this.slots('icon', {
        active,
      });

      if (slot) {
        return slot;
      }

      if (this.icon) {
        return h(_icon.default, {
          attrs: {
            name: this.icon,
            classPrefix: this.iconPrefix,
          },
        });
      }
    },
  },
  render: function render() {
    const h = arguments[0];
    const active = this.parent.route ? this.routeActive : this.active;
    const color = this.parent[active ? 'activeColor' : 'inactiveColor'];
    return h('div', {
      class: bem({
        active,
      }),
      style: {
        color,
      },
      on: {
        click: this.onClick,
      },
    }, [h('div', {
      class: bem('icon'),
    }, [this.genIcon(active), h(_info.default, {
      attrs: {
        dot: this.dot,
        info: (0, _utils.isDef)(this.badge) ? this.badge : this.info,
      },
    })]), h('div', {
      class: bem('text'),
    }, [this.slots('default', {
      active,
    })])]);
  },
});

exports.default = _default;
